<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="../headinclude.jsp" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<jsp:include page="../include.jsp"></jsp:include>
<script src="js/role.js" type="text/javascript"></script>
<style type="text/css">
.TDHead {
    background-color:#add2da;
    border:1px solid #c0c0c0;
    font-weight:bold;
    color:#333;
    padding-left:4px;
}
/**/
.TDList {
    background-color:#fff;
    border:1px solid #c0c0c0;
    height:26px;
    color:#333;
    padding-left:9px;
}
/**/
.ListTable {
    vertical-align:top;
    border-left:1px solid #7CB5E2;
    border-bottom:1px solid #7CB5E2;
    border-right:1px solid #7CB5E2;
   }
</style>
</head>
<body>
<div style="margin: -6px 0px 0 -8px; min-width: 650px; width: 100%;min-height: 400px;height: 100%;">
  <div style="width: 100%;float: left;min-width: 727px;"> 
     
    <div>
	 	<div style="width:100%;height:30px; background-image:url('images/main_28.gif'); background-repeat: repeat-x;"> </div>
	    <div style=" margin:-22px 0px 16px 22px; width:200px;height:14px; background:url('images/tb.gif') no-repeat;">
	    <span style="padding-left:30px; color: #E1E2E3; font-size: 12px;">添加新角色</span>
	    </div>
	    
   </div>

     <form id="roleAddForm" action="role!add.action" method="post">
		  <table align="center" cellpadding="0" border="0" cellspacing="0" width="80%" style="margin-top: -3px;">
		       <input type="hidden" name="privilegeIds" id="privilegeIds"></input>
		       <tr>
		          <th class="TDHead">角色名称</th><td class="TDList"><input type="text" name="name" style="width: 100%;"/></td>
	           </tr>
	           <tr>
		          <th class="TDHead">备注</th> 
		          <td class="TDList" colspan="3">
		              <textarea rows="3" class="textarea1" style="width: 100%;" name="remark"></textarea>
		          </td>
		       </tr>
	           <tr>
		          <th class="TDHead">权限列表</th>
		          <td class="TDList">
		         	 <table>
		         	    <tr>
		         	    <td>
		         	        <div align="center"><span>可选权限</span><br>
								<select id="leftPriSelect" multiple="multiple" style="width:150;height: 200px;">
								   <c:forEach items="${privilegeList}" var="privilege">
					         	        <option value="${privilege.id}">${privilege.name}</option>
					         	   </c:forEach>
								</select>
							</div>
		         	    </td>
		         	    <td>
		         	        <input type="button" value=">>" style="width: 40px;" onclick="moveAllRight()"/><br/>
		         	        <input type="button" value=">" style="width: 40px;" onclick="moveOneRight()"/><br/>
		         	        <input type="button" value="<" style="width: 40px;" onclick="moveOneLeft()"/><br/>
		         	        <input type="button" value="<<" style="width: 40px;" onclick="moveAllLeft()"/>
		         	    </td>
		         	    <td>
		         	       <div align="center"><span>当前拥有的权限</span><br>
			         	       <select multiple="multiple" id="rightPriSelect" style="width:150;height: 200px;">
							   </select>
						  </div>
		         	    </td>
		         	    </tr>
		         	 </table>
		          </td>
		        </tr>
		        <tr>
		            <td class="TDList" style="text-align: center;" colspan="2">
			            <input type="button" value="确认" onclick="roleAdd()"/>
			            <input type="button" value="取消" onclick="javascript:history.go(-1);"/>
		            </td>
	          </tr>
		  </table>
	  </form>
   </div>
   <div style="margin:-2px -8px; float:right; width:8px; background-color: #353c44; height:550px; "></div>
   </div>
   </body>
</html>
